import React from 'react'
import { connect } from 'react-redux'
import { Layout, Fixed } from 'react-layout-pane'
import { projectLabelView as projectDuck } from 'ducks'
import Ribbon from './ribbon'
import GetLabels from './fetchItemLabels'

const mainView = ({ pid, activeItemId }) => (
  <Layout type="column">
    <Fixed className="ribbon">
      <Ribbon />
    </Fixed>
    {activeItemId && <GetLabels pid={pid} />}
  </Layout>
)

const mapStateToProps = state => ({
  activeItemId: projectDuck.selectors.activeItemId(state),
})

export default connect(
  mapStateToProps,
  null,
)(mainView)
